<template>
    <div>
      <h2>插槽的使用</h2>
      <SlotEle></SlotEle>
      <SlotEle><div>替换插槽默认内容</div></SlotEle>
      <hr>
      <h2>具名插槽的使用</h2>
      <!-- 具名插槽/作用域插槽 现在是用template包裹  且作用域插槽在表格中有特殊作用-->
      <JuMing></JuMing>
      <JuMing><span slot="main">替换中间的内容</span></JuMing>
      <JuMing><template #main><span>替换中间的内容</span></template></JuMing>
      <JuMing>
      <!--   #简写 -->
        <template #header><div>dads</div></template>
        <template v-slot:main><div>dasda</div></template>
        <template v-slot:footer><div>132456</div></template>
      </JuMing>
      <hr>

      <BY>
        <!--slot-scope="slot" 引用模板中的插条对象    slot是一个对象 支持解构赋值-->
            <template slot-scope="slot">
<!--        <template v-slot:jm="slot"> 如果这里有:jm 对应的子插槽要有名字jm-->
<!--        <template #jm="slot"> 如果这里有:jm 对应的子插槽要有名字jm-->
          <!--  data是子组件绑定的数据 -->
            <span v-for="item in slot.data">{{item}}——</span>
            <br>
            <span v-for="item in slot.data">{{item}}###</span>
            <br>
              <span v-for="item in slot.language2">{{item}}//</span>
        </template>
      </BY>
    </div>
</template>

<script>
  import SlotEle from "@/views/vue/component/slot/SlotEle";
  import JuMing from "@/views/vue/component/slot/JuMing";
  import BY from "@/views/vue/component/slot/BY"
    export default {
        name: "SlotApply",
        components:{
          SlotEle,
          JuMing,
          BY
        }
    }
</script>

<style scoped>

</style>
<!--

作用域插槽的使用
      父组件模板的所有东西都会在父级作用域内编译；
      子组件模板的所有东西都会在子级作用域内编译。
      简单的所，就是父组件中不能直接用自组件中定义的data数据。而slot-scope的出现就是解决了这样的问题。
-->
